<template>
  <Category :scene="scene"></Category>
  <el-card>
    <!-- 没有三级分类id就🈲用 -->
  <div v-show="scene==0">
    <el-button type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id ? false : true" @click="addSpu">添加SPU</el-button>
    <!-- 上下左右 -->
    <el-table border style="margin: 10px 0;" :data="records" >
      <el-table-column width="80px" label="序号" type="index" align="center"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
      <el-table-column label="SPU操作">
        <!-- row是每个已有的spu -->
        <template #="{row,$index}">
          <el-button icon="Plus" type="primary" title="添加sku" size="small" @click="addSku(row)"></el-button>
          <el-button icon="Edit" type="primary" title="编辑spu" size="small" @click="updateSpu(row)"></el-button>
          <el-button icon="View" type="primary" title="查看sku列表" size="small" @click="findSku(row)"></el-button>
          <el-popconfirm :title="`你确定要删除${row.spuName}吗？`" @confirm="deleteSpu(row)">
               <template #reference>
                <el-button icon="Delete" type="primary" title="删除spu" size="small"></el-button>
               </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[3,5,7,9]"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @current-change="getHasSpu"
      @size-change="changeSize"
    />
  </div>
   
    <!-- 添加spu/修改spu子组件 -->
    <spuForm  v-show="scene==1" @changeScene="changeScene" ref="spu"></spuForm>

     <!-- 添加sku子组件 -->
     <skuForm  v-show="scene==2" @changeScene="changeScene" ref="sku"></skuForm>

      <!-- dialog对话框：展示已有的sku数据 -->
  <el-dialog v-model="show" title="sku列表">
    <el-table :data="skuArr" border>
      <el-table-column prop="skuName" label="SKU名字"></el-table-column>
      <el-table-column prop="price" label="SKU价格"></el-table-column>
      <el-table-column prop="weight" label="SKU重量"></el-table-column>
      <el-table-column label="SKU图片">
        <template #="{row,$index}">
          <img :src="row.skuDefaultImg" style="width: 100%;height: 100%;">
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  </el-card>
</template>

<script setup lang="ts">
import type { HasSpuResponseData,Records,SpuData,SkuInfoData, SkuData} from '@/api/product/spu/type';
import { reqHasSpu ,reqSkuList,reqRemoveSpu} from '@/api/product/spu';
import {ref, watch,onBeforeUnmount} from 'vue'
import useCategoryStore from '@/store/modules/category';
import skuForm from './skuForm.vue'
import spuForm from './spuForm.vue'
import { ElMessage } from 'element-plus';
let categoryStore = useCategoryStore()
// 场景0显示总的  场景一显示spu  场景二显示sku
let scene = ref<number>(0)
let pageNo = ref<number>(1)
let pageSize = ref<number>(3)
let records = ref<Records>([])
let total = ref<number>(0)
//获取子组件实例SpuForm
let spu = ref<any>()
//获取子组件实例SkuForm
let sku = ref<any>()
// 一点三级分类就发请求
watch(()=>categoryStore.c3Id,()=>{
  if(!categoryStore.c3Id) return;
  getHasSpu()
})
// 发请求  
const getHasSpu = async(pager=1)=>{
  // 修改页码
  pageNo.value = pager
  let result:HasSpuResponseData = await reqHasSpu(pageNo.value,pageSize.value,categoryStore.c3Id)
  if(result.code==200){
    records.value = result.data.records
    total.value = result.data.total
  }
}
//分页器下拉菜单发生变化的时候触发
const changeSize = ()=>{
  getHasSpu()
}
//切换添加场景
const addSpu = ()=> {
  scene.value = 1
  // 点击添加spu按钮，调用子组件的方法
  spu.value.initAddSpu(categoryStore.c3Id)
}
//子组件spu的自定义事件，让子组件通知父组件scene切换为0
const changeScene = (obj:any)=>{
  // 子组件点击取消展示已有的spu
  scene.value = obj.flag;
  if(obj.params == 'update') {
    // 更新留在当前页
    getHasSpu(pageNo.value)
  }else{
    //添加留在第一页
    getHasSpu()
  }
}

//修改
const updateSpu = (row:SpuData)=>{
  scene.value = 1
  // 调用子组件实例方法获取完整已有的spu数据
  spu.value.initHasSpuData(row)
}

//添加sku按钮的回调
const addSku = (row:SpuData)=>{
  scene.value = 2
  // 调用子组件的方法初始化添加sku的数据
  sku.value.initSkuData(categoryStore.c1Id,categoryStore.c2Id,row)
}
//存储全部sku的数据
let skuArr = ref<SkuData[]>([])

//控制查看sku的对话框显示与隐藏
let show = ref<boolean>(false)
//查看sku列表方法
const findSku = async(row:SpuData)=>{
  let result:SkuInfoData = await reqSkuList((row.id as number))
  if(result.code==200){
    skuArr.value =  result.data
    // 对话框显示出来
    show.value = true
  }
}

//删除已有的spu的回调
const deleteSpu = async(row:SpuData)=>{
  let result:any = await reqRemoveSpu((row.id as number))
  if(result.code==200){
    ElMessage({
      type:'success',
      message:'删除成功'
    })
    //获取剩余的已有spu数据
    getHasSpu(records.value.length>1?pageNo.value:pageNo.value-1)
  }else{ElMessage({
      type:'error',
      message:'删除失败'
    })
  }
}

// 路由组件销毁前，清空仓库关于分类的数据
onBeforeUnmount(()=>{
  categoryStore.$reset()
})
</script>

<style scoped>

</style>